<template>
  <div class="my-index">
    <!-- 导航 -->
    <header>
      <ul>
        <li>
          <router-link to="/backstage">个人中心</router-link>
        </li>
        <li>
          <router-link to="/doctorPage/d-appoint">处理挂号</router-link>
        </li>
        <li>
          <router-link to="/doctorPage/d-chat">在线咨询</router-link>
        </li>
      </ul>
    </header>
    <main>
      <!-- 时钟 -->
      <div class="clock">
        <p>{{ timeNum.hh1 }}</p>
        <p>{{ timeNum.hh2 }}</p>
        <p>:</p>
        <p>{{ timeNum.mm1 }}</p>
        <p>{{ timeNum.mm2 }}</p>
        <p>:</p>
        <p>{{ timeNum.ss1 }}</p>
        <p>{{ timeNum.ss2 }}</p>
      </div>
      <!-- 卡片 -->
      <MyRow>
        <div class="box">
          <span></span>
          <div class="content">
            <h2>个人中心</h2>
            <p>或涵盖个人信息</p>
            <p>或守护数据隐私</p>
            <router-link to="/backstage">
              <el-button plain size="large" type="success">个人中心</el-button>
            </router-link>
          </div>
        </div>
        <div class="box">
          <span></span>
          <div class="content">
            <h2>处理挂号</h2>
            <p>或安排专业治疗</p>
            <p>或护佑生命安宁</p>
            <router-link to="/doctorPage/d-appoint">
              <el-button plain size="large" type="danger">处理挂号</el-button>
            </router-link>
          </div>
        </div>
        <div class="box">
          <span></span>
          <div class="content">
            <h2>在线咨询</h2>
            <p>或提供专业解答</p>
            <p>或构建知识桥梁</p>
            <router-link to="/doctorPage/d-chat">
              <el-button plain size="large" type="primary">在线咨询</el-button>
            </router-link>
          </div>
        </div>
      </MyRow>
    </main>
  </div>
</template>

<script lang="ts" setup>

import {onBeforeUnmount, onMounted, reactive} from "vue";
import MyRow from "@/components/row/MyRow.vue";
// 一秒执行一次
let timeTimer: NodeJS.Timer;

onMounted(() => {
  timeTimer = setInterval(myTime, 1000);
})

onBeforeUnmount(() => {
  clearInterval(timeTimer)
})

const timeNum = reactive({
  hh1: 0,
  hh2: 0,
  mm1: 0,
  mm2: 0,
  ss1: 0,
  ss2: 0
})

const myTime = () => {
  const time = new Date();
  const hh = time.getHours();  //时
  const mm = time.getMinutes();  //分
  const ss = time.getSeconds();  //秒
  // Math.floor() 向下取整
  timeNum.hh1 = Math.floor(hh / 10)
  timeNum.hh2 = hh % 10
  timeNum.mm1 = Math.floor(mm / 10)
  timeNum.mm2 = mm % 10
  timeNum.ss1 = Math.floor(ss / 10)
  timeNum.ss2 = ss % 10
}
</script>

<style lang="scss" scoped>
.my-index {
  -webkit-user-select: none;
  user-select: none;
  min-height: 98vh;
  background-image: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  padding: 20px;
}

/* 导航优化 */
header {
  width: 90%;
  max-width: 800px;
  height: 60px;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 4px 30px rgba(255, 105, 180, 0.3);
  border-radius: 12px;
  background: linear-gradient(to right, #ff758c, #ff7eb3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 35px rgba(255, 105, 180, 0.4);
  }

  ul {
    width: 80%;
    min-width: 300px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      width: 30%;
      transition: all 0.3s ease;

      a {
        font-size: 16px;
        font-weight: 600;
        color: white;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        transition: all 0.2s ease;
      }

      &:hover {
        transform: scale(1.05);

        a {
          color: white !important;
          text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
      }

      &:nth-child(1):hover {
        border-bottom: 3px solid rgba(103, 194, 58, 0.7);
      }

      &:nth-child(2):hover {
        border-bottom: 3px solid rgba(255, 71, 87, 0.7);
      }

      &:nth-child(3):hover {
        border-bottom: 3px solid rgba(147, 112, 219, 0.7);
      }
    }
  }
}

/* 时钟优化 */
.clock {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 40px 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);

  p {
    width: 60px;
    font-size: 72px;
    color: white;
    text-align: center;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }
  }
}

/* 卡片入口优化 */
.box {
  position: relative;
  margin: 20px;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  &:hover {
    transform: translateY(-10px);
  }

  &:before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 105, 180, 0.8), rgba(255, 165, 0, 0.8));
    border-radius: 16px;
    transform: rotate(-5deg);
    transition: all 0.5s ease;
    box-shadow: 0 20px 40px rgba(255, 105, 180, 0.3);
  }

  &:hover:before {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 25px 50px rgba(255, 105, 180, 0.4);
  }

  .content {
    position: relative;
    width: 90%;
    height: 90%;
    padding: 30px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    text-align: center;
    z-index: 2;
    transition: all 0.3s ease;

    h2 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 15px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    p {
      margin: 10px 0;
      font-size: 14px;
      opacity: 0.9;
    }

    .el-button {
      margin-top: 20px;
      font-weight: 600;
      letter-spacing: 1px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      }
    }
  }
}
</style>

